import React, { Component } from 'react'
import { Tree, Tabs, message, Button, Tooltip } from 'antd'
// import { request } from '../helper'
// import { PATH } from '../const/const'
import { get, post, put, Delete } from '@/services/https'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
const TreeNode = Tree.TreeNode
const TabPane = Tabs.TabPane
class NetTransfer extends Component {
  state = {
    treeData: [],
    select: '',
    rSelect: '',
    tab: '1',
    info: [],
    id: '',
    expandedKeys: [],
    loadedKeys: [],
  }
  componentDidMount() {}
  componentWillReceiveProps(newProps) {
    this.setState({ treeData: newProps.treeData })
  }
  onLoadData = (treeNode) => {
    let obj = {
      baseDir: treeNode.props.path + '/',
      subDir: treeNode.props.name,
    }
    let treeData = [...this.state.treeData]
    if (treeNode.pos.length == 3) {
      this.setState({ id: treeNode.key })
      return new Promise((resolve) => {
        if (treeNode.group_id == undefined) {
          let data = {
            ad_type: treeNode.ad_type,
            group_id: treeNode.key,
            parent_id: '',
          }
          post('/userad?command=getDbDirectoryInfo', data).then((res) => {
            if (res.data === null || res.data.length === 0) {
              this.setOneTreeNode(treeNode.props.pos, 'isLeaf')
            } else {
              this.getNewTree(
                treeData,
                res.data,
                treeNode.props.name,
                treeNode.key
              )
              this.setState({ treeData })
            }
          })
          resolve()
        } else {
          let data = {
            ad_type: treeNode.ad_type,
            group_id: treeNode.group_id,
            parent_id: treeNode.key,
          }
          post('/userad?command=getDbDirectoryInfo', data).then((res) => {
            if (res.data === null || res.data.length === 0) {
              this.setOneTreeNode(treeNode.props.pos, 'isLeaf')
            } else {
              this.getNewTree(
                treeData,
                res.data,
                treeNode.props.name,
                treeNode.key
              )
              this.setState({ treeData })
            }
          })
          resolve()
        }
      })
    } else {
      return new Promise((resolve) => {
        let data = {
          ad_type: treeNode.ad_type,
          group_id: treeNode.group_id,
          parent_id: treeNode.key,
        }
        post('/userad?command=getDbDirectoryInfo', data).then((res) => {
          if (res.data === null || res.data.length === 0) {
            this.setOneTreeNode(treeNode.props.pos, 'isLeaf')
          } else {
            this.getNewTree(
              treeData,
              res.data,
              treeNode.props.name,
              treeNode.key
            )
            this.setState({ treeData })
          }
        })
        resolve()
      })
    }
  }
  getNewTree(treeData, json, title, key) {
    let child = this.formatChildData(json, key)
    let loop = (data) => {
      data.forEach((item) => {
        if (item.children) {
          loop(item.children)
        } else if (item.name === title) {
          item.children = child
        }
      })
    }
    loop(treeData)
  }
  formatChildData(json, key) {
    let arr = [...this.props.selectData, ...this.props.outData].map(
      (item) => item.id
    )
    let tree = json.map((item, index) => ({
      path: item.id,
      id: item.id,
      base_dn: item.ud_path,
      isLeaf: false,
      name: item.show_name,
      disabled: false,
      mail: item.mail_addr,
      ad_type: item.ad_type,
      group_id: item.group_id,
    }))
    tree.forEach((item) => {
      if (arr.includes(item.id) || item.id == '') {
        item.disabled = true
      }
    })
    return tree
  }
  setOneTreeNode(pos, key) {
    let treeData = this.state.treeData
    let posArray = pos.split('-')
    posArray.shift()
    let t = treeData[posArray[0]]
    posArray.shift()
    for (let p of posArray) {
      t = t.children[p]
    }
    t[key] = true
    if (key === 'disabled') {
      if (this.props.tabs && this.state.tab === '2') {
        let outData = [...this.props.outData, { ...t, pos }]
        this.props.getOutData(outData)
      } else {
        let selectData = [...this.props.selectData, { ...t, pos }]
        this.props.getSelectData(selectData)
      }
    }
    this.setState({ treeData })
  }
  onSelect = (info, e) => {
    console.log(info, 12)
    if (info.length === 0) {
      this.setState({ select: '' })
    } else {
      this.setState({ select: e.node.props.pos })
    }
  }
  onExpand = (Keys, info) => {
    const { loadedKeys, expandedKeys } = this.state
    console.log(Keys, 12)
    console.log(info, 12)

    let newLoadKeys = loadedKeys
    if (expandedKeys.length > Keys.length) {
      newLoadKeys = loadedKeys.filter((i) => Keys.includes(i))
    }
    this.setState({
      expandedKeys: Keys,
      loadedKeys: newLoadKeys,
    })
    // if (!info.expanded) {
    this.onLoadData(info.node)
    // }
  }
  onRightSelect = (info, e) => {
    this.setState({ info })
    if (info.length === 0) {
      this.setState({ rSelect: '' })
    } else if (e.node.props.cur) {
      this.setState({ rSelect: e.node.props.cur })
    } else {
      this.setState({ rSelect: e.node.props.eventKey })
    }
  }
  handleLeftClick = () => {
    this.setOneTreeNode(this.state.select, 'disabled')
    this.setState({ select: '' })
  }
  handleRightClick = () => {
    let index = this.state.rSelect.indexOf('-')
    if (index === -1 || index > 1) {
      this.eventKeyToTreeNode(this.state.rSelect)
    } else {
      this.reOneTreeNode(this.state.rSelect)
    }
    this.setState({ rSelect: '' })
  }
  reOneTreeNode(pos) {
    let treeData = this.state.treeData
    let selectData = this.props.selectData
    let outData = this.props.outData
    let posArray = pos.split('-')
    posArray.shift()
    let t = treeData[posArray[0]]
    posArray.shift()
    for (let p of posArray) {
      t = t.children[p]
    }
    t.disabled = false
    if (this.props.tabs && this.state.tab === '2') {
      let d = outData.filter((val) => val.id !== t.id)
      this.setState({ treeData })
      this.props.getOutData(d)
    } else {
      // selectData.splice(selectData.indexOf(t), 1)
      let d = selectData.filter((val) => val.id !== t.id)
      this.setState({ treeData })
      this.props.getSelectData(d)
    }
  }
  eventKeyToTreeNode(eventKey) {
    let treeData = this.state.treeData
    let selectData = this.props.selectData
    let outData = this.props.outData
    let loop = (data) => {
      data.forEach((item) => {
        if (item.children) {
          loop(item.children)
        } else if (item.id === eventKey) {
          item.disabled = false
        }
      })
    }
    loop(treeData)
    if (this.props.tabs && this.state.tab === '2') {
      let d = outData.filter((val) => val.id !== eventKey)
      this.setState({ treeData })
      this.props.getOutData(d)
    } else {
      // selectData.splice(selectData.indexOf(t), 1)
      let d = selectData.filter((val) => val.id !== eventKey)
      this.setState({ treeData })
      this.props.getSelectData(d)
    }
  }
  handleTabChange = (e) => {
    this.setState({ tab: e })
    this.setState({ rSelect: '' })
  }
  render() {
    const loop = (data) =>
      data.map((item) => {
        if (item.children) {
          return (
            <TreeNode
              title={
                <div>
                  <Tooltip title={item.name}>
                    <p
                      style={{
                        width: '290px',
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        marginBottom: 0,
                      }}
                    >
                      {item.name}
                    </p>
                  </Tooltip>
                </div>
              }
              group_id={item.group_id}
              name={item.name}
              base_dn={item.base_dn}
              path={item.base_dn}
              ad_type={item.ad_type}
              id={item.id}
              key={item.id}
              isLeaf={item.isLeaf}
              disabled={item.disabled}
            >
              {loop(item.children)}
            </TreeNode>
          )
        }
        return (
          <TreeNode
            title={
              <div>
                <Tooltip title={item.name}>
                  <p
                    style={{
                      width: '290px',
                      overflow: 'hidden',
                      whiteSpace: 'nowrap',
                      textOverflow: 'ellipsis',
                      marginBottom: 0,
                    }}
                  >
                    {item.name}
                  </p>
                </Tooltip>
              </div>
            }
            group_id={item.group_id}
            name={item.name}
            ad_type={item.ad_type}
            base_dn={item.base_dn}
            path={item.base_dn}
            id={item.id}
            key={item.id}
            isLeaf={item.isLeaf}
            disabled={item.disabled}
          />
        )
      })
    const treeNodes = loop(this.state.treeData)
    return (
      <div className="transfer-style-warp">
        <div className="ant-transfer">
          <div className="transfer-list">
            <div className="ant-transfer-list-header">
              <label className="ant-checkbox-wrapper">
                <span className="ant-checkbox">
                  <span className="ant-checkbox-inner" style={{ border: 0 }}>
                    目录用户
                  </span>
                </span>
              </label>
            </div>
            <div className="ant-transfer-list-body">
              <Tree
                onSelect={this.onSelect}
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand}
                // loadData={this.onLoadData}
              >
                {treeNodes}
              </Tree>
            </div>
          </div>
          <div className="ant-transfer-operation">
            <Button
              onClick={this.handleLeftClick}
              disabled={this.state.select === ''}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
              icon={<RightOutlined />}
            ></Button>
            <Button
              onClick={this.handleRightClick}
              disabled={this.state.rSelect === ''}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
              icon={<LeftOutlined />}
            ></Button>
          </div>
          <div className="tab-transfer-list">
            <div className="transfer-list second-list">
              <div className="ant-transfer-list-header">
                <label className="ant-checkbox-wrapper">
                  <span className="ant-checkbox">
                    <span className="ant-checkbox-inner" style={{ border: 0 }}>
                      选中的
                    </span>
                  </span>
                </label>
              </div>
              <div className="ant-transfer-list-body">
                <Tree
                  onSelect={this.onRightSelect}
                  selectedKeys={this.state.info}
                >
                  {this.props.selectData.map((item, index) => {
                    return (
                      <TreeNode
                        title={item.name}
                        key={item.id}
                        isLeaf={true}
                        disabled={false}
                      />
                    )
                  })}
                </Tree>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default NetTransfer
